<template>
  <van-notice-bar
      left-icon="volume-o"
      color="#1989fa" background="#ecf9ff"
      text="欢迎使用homie匹配，在这里你可以寻找你的学习homie和生活homie甚至是灵魂伴侣，但是要遵纪守法哦。最后欢迎大家提出反馈和建议！"
  />
  
  <div class="search-container">
    <van-search 
      v-model="searchText" 
      placeholder="输入距离，搜索附近的用户" 
      @search="onSearch(searchText)"
      shape="round"
      class="search-input"
    >
      <template #action>
        <van-button size="small" type="primary" @click="onSearch(searchText)" class="search-btn">
          搜索
        </van-button>
      </template>
      <template #left-icon>
        <van-icon name="location" color="#1989fa" size="18" />
      </template>
      <template #right-icon v-if="searchText">
        <div class="unit-label">公里</div>
      </template>
    </van-search>
    
    <div class="quick-radius-chips">
      <van-tag 
        v-for="radius in [1, 5, 10, 20, 50]" 
        :key="radius" 
        plain
        :color="searchText === radius.toString() ? '#1989fa' : '#969799'" 
        size="medium"
        @click="selectRadius(radius)"
        class="radius-chip"
      >
        {{ radius }}公里
      </van-tag>
    </div>
  </div>
  
  <van-tabs v-model:active="activeTab" animated @change="handleTabChange" sticky>
    <van-tab title="地图模式" name="0">
      <a-map-container 
        ref="mapContainerRef"
        :user-list="userList" 
        :loading="loading"
        @click-user="toIntroUser"
      />
    </van-tab>
    
    <van-tab title="列表模式" name="1">
      <!-- 列表模式下的心动模式开关 -->
      <van-cell center title="心动模式">
        <template #right-icon>
          <van-switch v-model="isMatchMode" size="24" @change="onMatchModeChange"/>
        </template>
      </van-cell>
      
      <user-card-list :user-list="userList" :loading="loading"/>
    </van-tab>
  </van-tabs>
  
  <van-back-top right="15vw" bottom="10vh" />
  <div style="display: flex; justify-content: center;">
    <infinite-loading :identifier="infiniteIdValue" @infinite="loadMore" v-if="!isMatchMode && activeTab === 1"/>
  </div>
  <van-empty v-if="!userList || userList.length < 1" description="数据为空"/>
</template>

<script setup lang="ts">
import { ref, watchEffect, computed, onMounted } from "vue";
import { useRouter } from "vue-router";

import myAxios from "../plugins/myAxios.ts";
import UserCardList from "../components/UserCardList.vue";
import AMapContainer from "../components/AMapContainer/index.vue";
import { UserType } from "../models/user"
import { showToast } from "vant";
import InfiniteLoading from "v3-infinite-loading";

// const route = useRoute(); // 移除未使用的route
const router = useRouter();
const searchText = ref('');
const userList = ref<UserType[]>([]);
const isMatchMode = ref<boolean>(false);
const loading = ref(true);
const infiniteId = ref('infinite-loading-id');
const activeTab = ref(0); // 0:地图模式，1:列表模式
const loadState = ref('idle'); // 加载状态：idle, loading, complete, error
const mode = computed(() => {
  return isMatchMode.value ? 'match' : 'recommend';
}) as { value: 'match' | 'recommend' | 'nearby' };
const radius = ref(50); // 附近搜索半径，默认50公里

// 计算属性，将infiniteId转换为字符串用于组件
const infiniteIdValue = computed(() => infiniteId.value);

let pageNum = 1;
let hasMoreData = ref(true);

// 重置无限滚动组件
const resetInfiniteScroll = () => {
  infiniteId.value = `infinite-loading-id-${Date.now()}`;
};

// 添加地图组件引用
const mapContainerRef = ref(null);

/**
 * 处理标签页切换
 */
const handleTabChange = (index: number) => {
  // 切换标签时重置加载状态
  if (index === 1) { // 切换到列表模式
    // 如果之前没有加载过列表数据，则重新加载
    if (userList.value.length === 0) {
      pageNum = 1;
      loadData();
    }
  } else { // 切换到地图模式
    // 确保地图模式下有数据显示
    if (userList.value.length === 0) {
      // 在地图模式下，强制切换到推荐模式
      if (isMatchMode.value) {
        isMatchMode.value = false;
      }
      pageNum = 1;
      loadData();
    }
  }
  // 重置无限加载组件的状态
  resetInfiniteScroll();
};

/**
 * 加载数据
 */
const loadData = async () => {
  try {
    loadState.value = 'loading';
    console.log('正在加载数据，模式: ' + mode.value);
    let userListData: UserType[] = [];
    
    // 强制刷新参数，处理经纬度加载问题
    const forceRefresh = localStorage.getItem('forceRefresh') === 'true';
    if (forceRefresh) {
      console.log('启用强制刷新缓存');
      localStorage.removeItem('forceRefresh');
    }

    if (mode.value === 'nearby') {
      // 附近模式 - 使用searchNearby接口
      const result = await myAxios.get('/user/nearby', {
        params: { radius: radius.value }
      }).then(response => {
        console.log('/user/nearby succeed', response);
        return response?.data ?? [];
      }).catch(error => {
        console.log('/user/nearby error', error);
        return [];
      });
      
      if (Array.isArray(result)) {
        userListData = result;
      }
    } else if (mode.value === 'match') {
      // 心动模式 - 使用match接口
      const result = await myAxios.get('/user/match', {
        params: { num: 8 },
      }).then(response => {
        console.log('/user/match succeed', response);
        return response?.data ?? [];
      }).catch(error => {
        console.log('/user/match error', error);
        return [];
      });
      
      if (Array.isArray(result)) {
        userListData = result;
        
        // 处理心动模式下的用户数据
        if (userListData.length > 0) {
          console.log('处理前的心动模式用户数据:', JSON.stringify(userListData, null, 2));
          
          // 获取当前用户信息
          const currentUserInfo = await myAxios.get('/user/current').then(response => {
            console.log('/user/current succeed', response);
            return response?.data;
          }).catch(error => {
            console.log('/user/current error', error);
            return null;
          });
          
          // 过滤掉当前用户
          if (currentUserInfo) {
            userListData = userListData.filter(user => user.id !== currentUserInfo.id);
            console.log('过滤当前用户后的心动模式数据:', JSON.stringify(userListData, null, 2));
          }
          
          userListData.forEach((user: UserType) => {
            // 检查所有可能的经纬度字段名
            checkAndMapCoordinates(user);
            
            if (user.tags) {
              try {
                // 记录原始tags值
                console.log(`用户 ${user.id}:${user.username} 原始tags:`, user.tags);
                user.tags = JSON.parse(user.tags as string);
                console.log(`用户 ${user.id}:${user.username} 转换后tags:`, user.tags);
              } catch (e) {
                console.error(`用户 ${user.id}:${user.username} tags解析错误:`, e);
              }
            }
          });
          
          console.log('处理后的心动模式用户数据:', JSON.stringify(userListData, null, 2));
        }
      }
    } else {
      // 推荐模式 - 默认使用recommend接口
      const result = await myAxios.get('/user/recommend', {
        params: { 
          pageSize: 20, 
          pageNum,
          refresh: forceRefresh  // 添加强制刷新参数
        },
      }).then(response => {
        console.log('/user/recommend succeed', response);
        // 记录原始数据，方便调试对比
        console.log('原始数据 - 推荐模式:', JSON.stringify(response?.data, null, 2));
        return response?.data ?? [];
      }).catch(error => {
        console.log('/user/recommend error', error);
        return [];
      });
      
      if (Array.isArray(result)) {
        userListData = result;
      }

      if (userListData.length > 0) {
        console.log('处理前的用户数据:', JSON.stringify(userListData, null, 2));
        
        // 获取当前用户信息
        const currentUserInfo = await myAxios.get('/user/current').then(response => {
          console.log('/user/current succeed', response);
          return response?.data;
        }).catch(error => {
          console.log('/user/current error', error);
          return null;
        });
        
        // 过滤掉当前用户
        if (currentUserInfo) {
          userListData = userListData.filter(user => user.id !== currentUserInfo.id);
          console.log('过滤当前用户后的数据:', JSON.stringify(userListData, null, 2));
        }
        
        userListData.forEach((user: UserType) => {
          // 检查所有可能的经纬度字段名
          checkAndMapCoordinates(user);
          
          if (user.tags) {
            try {
              // 记录原始tags值
              console.log(`用户 ${user.id}:${user.username} 原始tags:`, user.tags);
              user.tags = JSON.parse(user.tags as string);
              console.log(`用户 ${user.id}:${user.username} 转换后tags:`, user.tags);
            } catch (e) {
              console.error(`用户 ${user.id}:${user.username} tags解析错误:`, e);
            }
          }
          
          // 记录经纬度信息
          console.log(`用户 ${user.id}:${user.username} 经纬度:`, user.longitude, user.dimension);
          
          // 检查经纬度是否为null，如果是则添加标志以便下次强制刷新
          if (user.longitude === null || user.dimension === null) {
            console.warn(`用户 ${user.id} 经纬度信息不完整，下次将强制刷新缓存`);
            localStorage.setItem('forceRefresh', 'true');
          }
        });
        console.log('处理后的用户数据:', JSON.stringify(userListData, null, 2));

        if (pageNum === 1) {
          userList.value = userListData;
        } else {
          userList.value = [...userList.value, ...userListData];
        }

        hasMoreData.value = userListData.length > 0;
      }
    }

    // 更新用户列表
    if (userListData.length > 0) {
      if (pageNum === 1) {
        userList.value = userListData;
      } else {
        userList.value = [...userList.value, ...userListData];
      }
      hasMoreData.value = userListData.length > 0;
    } else {
      // 如果没有数据，显示空列表
      userList.value = [];
      hasMoreData.value = false;
    }

    loading.value = false;
  } catch (error) {
    console.error('加载数据时出错:', error);
    showToast('加载数据时出错');
    loading.value = false;
  }
};

const onMatchModeChange = () => {
  // 无论是地图模式还是列表模式都可以使用心动匹配
  userList.value = [];
  pageNum = 1;
  hasMoreData.value = true;
  resetInfiniteScroll(); // 重置无限滚动组件
  loadData();
};

const loadMore = () => {
  if (hasMoreData.value) {
    pageNum++;
    loadData();
  }
};

const onSearch = async (searchText: string) => {
  let userListData;
  loading.value = true;

  // 解析搜索文本为数字，如果无效则使用默认值50
  let searchRadius = 50;
  if (searchText) {
    const parsedRadius = parseInt(searchText);
    // 检查是否为有效数字
    if (!isNaN(parsedRadius) && parsedRadius > 0) {
      searchRadius = parsedRadius;
      // 保存用户常用的搜索半径
      localStorage.setItem('lastSearchRadius', searchRadius.toString());
    } else {
      showToast('请输入有效的搜索半径数字');
      searchText = '';
      loading.value = false;
      return;
    }
  }

  const res : any = await myAxios.get('/user/searchNearby', {
    params: { radius: searchRadius }
  });

  console.log('搜索请求原始响应数据:', res);
  console.log('搜索半径:', searchRadius, '公里');

  if (res?.code === 0) {
    userListData = res.data;
    console.log('搜索结果:', userListData);
    
    // 过滤掉自己
    const currentUserInfo = await myAxios.get('/user/current').then(response => {
      return response?.data;
    }).catch(() => null);

    if (currentUserInfo) {
      userListData = userListData.filter(user => user.id !== currentUserInfo.id);
    }

    if (userListData && userListData.length > 0) {
      userListData.forEach(user => {
        // 解析标签
        try {
          if (user.tags) {
            user.tags = JSON.parse(user.tags);
          }
        } catch (e) {
          console.error(`用户 ${user.id} 标签解析错误:`, e);
        }
      });
      
      userList.value = userListData;
      
      // 如果是地图模式，将地图中心移动到搜索到的用户群中心
      if (activeTab.value === 0 && userListData.length > 0) {
        // 等待DOM更新完成，确保地图标记已添加
        setTimeout(() => {
          // 计算所有用户的平均经纬度作为中心点
          let totalLng = 0;
          let totalLat = 0;
          let validUsers = 0;
          
          userListData.forEach(user => {
            if (user.longitude && user.dimension) {
              totalLng += user.longitude;
              totalLat += user.dimension;
              validUsers++;
            }
          });
          
          if (validUsers > 0) {
            const centerLng = totalLng / validUsers;
            const centerLat = totalLat / validUsers;
            console.log(`计算的用户群中心点: 经度=${centerLng}, 纬度=${centerLat}`);
            
            // 触发自定义事件，通知地图组件更新中心点
            const event = new CustomEvent('update-map-center', {
              detail: {
                center: [centerLng, centerLat],
                userList: userListData
              }
            });
            document.dispatchEvent(event);
          }
        }, 500);
      }

      // 显示搜索结果的提示
      showToast(`找到附近${userListData.length}位用户`);
    } else {
      userList.value = [];
      showToast('附近没有找到用户');
    }

    loading.value = false;
  } else {
    showToast('搜索失败' + (res?.description ? `，${res.description}` : ''));
    loading.value = false;
  }
};

// 选择快速半径
const selectRadius = (radius: number) => {
  searchText.value = radius.toString();
  onSearch(searchText.value);
};

// 页面加载时检查是否有上次的搜索半径
onMounted(() => {
  const lastRadius = localStorage.getItem('lastSearchRadius');
  if (lastRadius) {
    searchText.value = lastRadius;
  }
});

// 检查并映射所有可能的经纬度字段名
const checkAndMapCoordinates = (user: any) => {
  // 记录原始数据所有字段
  console.log(`用户 ${user.id}:${user.username} 所有字段:`, Object.keys(user));
  
  // 仅使用dimension作为纬度字段
  
  // 首先检查是否有经度字段
  if (user.longitude === undefined) {
    // 尝试查找替代字段
    if (user.lon !== undefined) {
      user.longitude = user.lon;
      console.log(`用户 ${user.id}:${user.username} 映射lon到longitude: ${user.lon}`);
    } else if (user.lng !== undefined) {
      user.longitude = user.lng;
      console.log(`用户 ${user.id}:${user.username} 映射lng到longitude: ${user.lng}`);
    } else {
      console.error(`用户 ${user.id}:${user.username} 无法找到经度数据`);
    }
  }
  
  // 检查纬度字段 - 仅使用dimension
  if (user.dimension === undefined) {
    // 如果没有dimension字段，尝试从其他字段获取
    if (user.latitude !== undefined) {
      user.dimension = user.latitude;
      console.log(`用户 ${user.id}:${user.username} 从latitude映射到dimension: ${user.latitude}`);
    } else if (user.lat !== undefined) {
      user.dimension = user.lat;
      console.log(`用户 ${user.id}:${user.username} 从lat映射到dimension: ${user.lat}`);
    } else {
      console.error(`用户 ${user.id}:${user.username} 无法找到纬度数据`);
    }
  }
  
  // 删除多余的纬度字段
  if (user.latitude !== undefined) {
    delete user.latitude;
  }
  if (user.lat !== undefined) {
    delete user.lat;
  }
  
  // 记录最终的坐标信息
  console.log(`用户 ${user.id}:${user.username} 最终坐标:`,
    `longitude=${user.longitude}`,
    `dimension=${user.dimension}`);
};

// 跳转到用户详情页
const toIntroUser = (id: number) => {
  router.push(`/user/intro/${id}`);
};

watchEffect(() => {
  loadData();
});

</script>

<style scoped>
/* 添加必要的样式 */
:deep(.van-tabs__content) {
  background-color: #f5f5f5;
}

:deep(.van-tabs__nav) {
  background-color: #ffffff;
}

:deep(.van-tab) {
  font-size: 16px;
  padding: 0 24px;
}

:deep(.van-tab--active) {
  font-weight: bold;
  color: #1989fa;
}

:deep(.van-notice-bar) {
  margin-bottom: 8px;
}

/* 添加样式 */
.search-container {
  padding: 8px 12px;
  background-color: #fff;
  border-bottom: 1px solid #f5f5f5;
}

.search-input {
  margin-bottom: 8px;
}

.search-btn {
  height: 34px;
  margin-left: 8px;
  border-radius: 17px;
}

.quick-radius-chips {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px 8px;
}

.radius-chip {
  margin: 0 8px 8px 0;
  padding: 6px 12px;
  border-radius: 16px;
  cursor: pointer;
}

.unit-label {
  color: #969799;
  font-size: 14px;
  margin-right: 8px;
}
</style>

<!-- 
修复说明：
1. 将心动模式切换开关移至页面顶部，使其在地图模式和列表模式都可见和可用
2. 修改模式计算逻辑，使心动模式可在地图模式下使用
3. 移除了错误提示"地图模式不支持心动匹配"
4. 简化了模式计算属性，现在mode只依赖于isMatchMode
-->
